<template>
  <!-- 系统介绍 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="系 统 介 绍">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <!-- 内容区域 -->
    <div class="content">
      <van-field
        v-model="message1"
        rows="2"
        autosize
        type="textarea"
        :disabled="!Ismodify"
      />
      <van-field
        v-model="message2"
        rows="2"
        autosize
        type="textarea"
        :disabled="!Ismodify"
      />
      <van-field
        v-model="message3"
        rows="2"
        autosize
        type="textarea"
        :disabled="!Ismodify"
      />
    </div>
    <div class="btn">
      <van-button type="primary" v-if="!this.Ismodify" block @click="modify"
        >修改系统介绍</van-button
      >
      <van-button type="primary" v-else block @click="confirm"
        >确认修改</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "System",

  data() {
    return {
      flag: true, //登陆用户标志位,true为管理员
      Ismodify: false,
      message1:'版本号：v12.512',
      message2:'开发者：谢林桁(系统移动端)，刘洋(系统服务端)',
      message3:'日期：2022.05.01',
    };
  },

  mounted() {},

  methods: {
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    //修改点击
    modify() {
      //只有管理员能修改
      if (this.flag) {
        this.Ismodify = true;
        Toast({
          message: "可修改系统文字介绍",
        });
      } else {
        Toast({
          message: "只有管理员用户才能修改系统介绍",
        });
      }
    },
    //确认修改点击
    confirm() {
      Toast({
        message: "修改成功,自动刷新页面",
      });
      setTimeout(() => {
        window.location.reload();
      }, 800);
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.content {
  padding-bottom: 45px;
}
.btn {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>